import {Card, Image, Tag, Button, Popconfirm, message} from 'antd';
import {EditOutlined, DeleteOutlined} from '@ant-design/icons';
import {downloadFileUrl} from "@/services/system/file";
import defaultImage from '@/assets/images/empty.svg'


interface CarouselCardProps {
  data: API.Carousel;
  onEdit: (item: API.Carousel) => void;
  onDelete: (id: number) => void;
}

export default ({data, onEdit, onDelete}: CarouselCardProps) => {
  return (
    <Card
      hoverable
      style={{width: 300, marginBottom: 16}}
      cover={
        <Image
          src={data.fileId ? downloadFileUrl(data.fileId) : defaultImage}
          alt={data.title}
          height={200}
          preview={false}
        />
      }
      actions={[
        <Button
          key={'edit'}
          type="text"
          icon={<EditOutlined/>}
          onClick={() => onEdit(data)}
        />,
        <Popconfirm
          key={'delete'}
          title="确定要删除这个轮播图吗？"
          onConfirm={() => {
            onDelete(data.id);
            message.success('删除成功');
          }}
        >
          <Button type="text" danger icon={<DeleteOutlined/>}/>
        </Popconfirm>
      ]}
    >
      <Card.Meta
        title={<>
          {data.title}
          {data.status === '1' && <Tag color="red" style={{marginLeft: 8}}>已停用</Tag>}
        </>}
        description={
          <>
            <div>排序: {data.sortOrder}</div>
            {data.linkUrl && <div>链接: {data.linkUrl}</div>}
          </>
        }
      />
    </Card>
  );
};
